<template>
    <div class="parent">
        <div class="header">
            <div class="column_one">
                <text class="text">区(镇村)</text>
            </div>
            <div class="column_one">
                <text class="text">2018年创建村总数(个)</text>
            </div>
            <div class="column_one">
                <text class="text">村庄规划(个)</text>
            </div>
            <div class="column_one">
                <text class="text">村庄拆违(平方米)</text>
            </div>
            <div class="column_two">
                <div class="column_two_top">
                    <text class="text">村庄绿化</text>
                </div>
                <div class="column_two_bottom">
                    <text class="text">需新增村庄绿化面积(平米)</text>
                </div>
            </div>
        </div>
        <scroller scroll-direction>
            <div class="cont">
                <div class="dataItem" v-for="(item, index) in datalist" :key="index">
                    <div class="contItem">
                        <text class="contText">{{item.XZQHMC}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.CJCSL}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GHCSL}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.CZCWMJ}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.XZLHMJ}}</text>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
export default {
    name: 'listCont',
    props: ['datalist'],
    created () {
        this.$notice.loading.show()
    },
    mounted () {
        this.$notice.loading.hide()
    }
}
</script>
<style scoped>
    .parent{
        width: 750px;
        flex: 1;
    }
    .header{
        width: 750px;
        height: 488px;
        background-color: rgba(35,196,160,1);
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .column_one{
        width: 150px;
        height: 488px;
        justify-content: center;
        align-items: center;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
        padding-left: 25px;
        padding-right: 20px;
    }
    .column_two{
        width: 150px;
        height: 488px;
    }
    .column_two_top{
        width: 150px;
        height: 80px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .column_two_bottom{
        width: 150px;
        height: 408px;
        justify-content: center;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
    }
    .text{
        font-size:28px;
        font-family:PingFangSC-Semibold;
        color:rgba(255,255,255,1);
    }
    
    .cont{
        width: 750px;
        padding-bottom: 96px;
    }
    .dataItem{
        width: 750px;
        height: 80px;
        border-bottom-color: #dddbdb;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #F7FAFF;
    }
    .contItem{
        width: 150px;
        height: 80px;
        border-right-color: #dddbdb;
        border-right-style: solid;
        border-right-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .contText{
        font-size: 24px;
        font-family:PingFangSC-Semibold;
        color: #333;
    }
</style>
